import React, {FC, useEffect, useRef, useState} from 'react';
import { throttle } from 'throttle-typescript';
import styles from './SystemHeader.module.scss'

interface SystemHeaderProps {
}

const SystemHeader: FC<SystemHeaderProps> = (props) => {
    const {children} = props;
    const mainRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        console.log('SystemHeader 组件挂载完毕!');
        const onScroll = () => {
            //为了保证兼容性，这里取两个值，哪个有值取哪一个
            //scrollTop就是触发滚轮事件时滚轮的高度
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            console.log('scrollTop', scrollTop);
            if (mainRef.current) {
                if (scrollTop > 75) {
                    mainRef.current.style.backgroundColor = 'rgba(0,0,0,1)'
                } else {
                    mainRef.current.style.backgroundColor = 'rgba(0,0,0,0)'
                }
            }
        }
        const onScrollWrapper = throttle(onScroll,100);
        // @ts-ignore
        window.addEventListener('scroll', onScrollWrapper);
        return () => {
            // @ts-ignore
            window.removeEventListener('scroll', onScrollWrapper);
        }
    }, []);

    console.log('SystemHeader 组件render!');
    return (
        <div className={styles.main} ref={mainRef}>
            <div className={'container'}>
                <h2>没用组件</h2>
                <div className={styles.mainMenu}>
                    <h5>联系我</h5>
                </div>
                <h5>Gitee</h5>
            </div>
        </div>
    );
};

export default SystemHeader;
